<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f6f6f6" :auto="false">
    <template #top>
      <uv-navbar placeholder title="我的收藏" :autoBack="true"></uv-navbar>
      <view class="tabs">
        <uv-tabs :list="tabsList" :current="current" @click="getTabs" :scrollable="false" lineColor="#1E1E1E"
          :activeStyle="formData.activeStyle" :inactiveStyle="formData.inactiveStyle" :itemStyle="formData.itemStyle"
          :customStyle="{ margin: '0 170rpx' }"></uv-tabs>
      </view>
    </template>
    <view class="boxs">
      <view class="boxs-top flex p-26 position-relative m-b-20" v-for="item in dataList" :key="item.id">
        <view class="position-absolute top-0 right-0">
          <u-image :src="ASSETSURL + 'collects.png'" width="60rpx" height="60rpx"
            :customStyle="{ 'border-radius': '0 12rpx', 'overflow': 'hidden' }" />
        </view>
        <view>
          <u-image :src="item.image" width="168rpx" height="168rpx" radius="8rpx" />
        </view>
        <view class="m-l-36">
          <view class="font-32 font-weight-bold m-t-26">
            {{ item.product_name }}
          </view>
          <view class="font-26 m-t-18"> 材质：{{ item.material }} </view>
        </view>
        <view class="m-l-auto m-t-auto flex align-ali font-26" @click="getProductDetail(item)">
          查看详情
          <uv-icon name="arrow-right" color="#8C8C8C"></uv-icon>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { myCollect } from '@/api/api.js';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady } from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const paging = ref(null);
const dataList = ref([]);
const current = ref(0);
const formData = reactive({
  activeStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '700',
    'font-size': '32rpx',
  },
  inactiveStyle: {
    'font-family': 'Source Han Sans CN',
    'font-weight': '500',
    'font-size': '32rpx',
    color: '#B5B5B5',
  },
  itemStyle: {
    height: '47rpx',
    'line-height': '47rpx',
    marginTop: '31rpx',
    marginBottom: '12rpx',
  },
});
const tabsList = ref([
  {
    name: '珠子',
  },
  {
    name: '配饰',
  },
]);
onShow(() => {
  setTimeout(() => {
    paging.value.reload();
  }, 100);
})
// 创意列表
const queryList = (page, limit) => {
  myCollect({ page, limit, class_type: current.value + 1 }).then((res) => {
    paging.value.complete(res.data.list);
  });
};
const getTabs = (index) => {
  current.value = index.index;
  paging.value.reload();
};

// diy材料详情
const getProductDetail = (e) => {

  // 这里改成diy材料详情页面
  route({
    url: '/packageDiy/customized/customized',
    params: {
      product_id: e.product_id,
    },
  });
};
</script>

<style lang="scss" scoped>
.tabs {
  background: #ffffff;
}

.boxs {
  width: 686rpx;
  // height: 685rpx;
  margin: 32rpx auto;

  .boxs-top {
    width: 100%;
    height: 215rpx;
    background: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
  }
}
</style>
